<template>
	<!-- 10.25 修改文字 -->
	<view class="u-pt-group dir-top-nowrap">
		<text class="u-group-name">购买人数</text>
		<view class="app-content dir-left-wrap">
			<view class="u-group-item" v-for="(item, index) in groups"
				:class="selectGroupAttrId == item.groups.id ? 'u-checked ' + theme + '-m-back ' + theme : 'u-unchecked'"
				@click="active(item)" :key="index">{{item.groups.people_num}}人</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-pt-attr',

		props: {
			groups: {
				type: Array,
				default () {
					return [];
				}
			},
			selectGroupAttrId: String,
			theme: String
		},
		methods: {
			active: function(item) {
				this.$emit('click', item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-unchecked {
		background-color: #f2f2f2;
		color: #353535;
	}

	.u-pt-group {
		margin: 24upx 32upx 0 32upx;
		border-bottom: 1upx solid #e2e2e2;
	}

	.u-group-name {
		font-size: 26upx;
		color: #666666;
		margin-bottom: 20upx;
	}

	.u-group-item {
		padding: 15upx 24upx;
		border-radius: 8upx;
		margin: 0 20upx 20upx 0;
		font-size: 26upx;
	}

	.u-checked {
		color: #ffffff;
	}
</style>
